<template>
	<view class="content ">
		<view @tap="next" class="next louis-padding-lf-0 louis-relative">
			<view class="Fonttext louis-font-B louis-absolute louis-flex-mind-center">

				<view 
				@tap.stop="getsetClipboardData"
				class="louisui louis-font-pixel louis-colo-A  louis-padding-20 louis-font-center">
					LOUIS-UI
				</view>
				<view class="HelloWord louis-font-pixel louis-colo-A louis-padding-0 ">
					{{titlelist[index].title}}
				</view>
				<view class="triangle">

					<image class="louis-w-max" src="http://louis1994.web3v.vip/common/imges/triangle.png" mode="widthFix"></image>
				</view>
				<view @tap.stop="changeScanAudioflag" class="ScanAudio louis-color-fff">
					<text v-if="ScanAudioflag" class="louis-icon-shengyin"></text>
					<text v-else class="louis-icon-shengyinguanbi"></text>
				</view>
			</view>

			<image class="louis-w-max " src="http://zons.oss-cn-shenzhen.aliyuncs.com/02d315c665cfbca64e2bad3c96d2687734159459.jpeg"
			 mode="widthFix"></image>
		</view>
		<view class="Basics">

			<louis-view v-for="(item,index) in Basicslist" :key="index" color="#fff" class="Basicsitem ">

				<view @tap="goBasics(item.title)" class="louis-flex-between">
					<view class="">
						<view class="louis-font-capitalize louis-font-40rpx louis-padding-bottom-10rpx  louis-text-B">
							{{item.title}}
						</view>
						<view class="">
							{{item.name}}
						</view>
					</view>
					<view class="louis-font-60rpx louis-flex-mind-center">
						<text :class="'louis-icon-'+item.icon"></text>
					</view>
				</view>
			</louis-view>

		</view>

	</view>
</template>

<script>
	
	
	
	
	
	const isDev = process.env.NODE_ENV === 'development'
	let url = null
	if (process.env.NODE_ENV === 'development') {
	           // url = 'https://656c-eleven-c69db3-1254279062.tcb.qcloud.la/fzxs12.TTF?sign=197f86bc1c9171f5a741e3c47186c3ec&t=1595260285';
			   url = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-unicb9418c/baeecf00-cfe3-11ea-b244-a9f5e5565f30.TTF';
		// #ifdef APP-PLUS
		      url="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-unicb9418c/baeecf00-cfe3-11ea-b244-a9f5e5565f30.TTF"
		// #endif
	        
	} else {
		console.log('生产环d境')
		  url="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-unicb9418c/baeecf00-cfe3-11ea-b244-a9f5e5565f30.TTF"
		// baseURL = 'http://www.app.kewek.com.cn/';
		// baseURL = 'http://www.atest.kewek.com.cn/'
	}
	
	
	
	
	
	
	// const url = 'http://www.test.admin.boree.com.cn/public/fonts/fzxs12.TTF';
	// const url = 'http://louis1994.web3v.vip/common/font/fzxs12.TTF'
	
	// const url = '/api/public/fonts/OPPOSans-R.ttf';


	export default {
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: 'LouisUI-一套类名驱动的UI库',
		      path: '/pages/index/index',
		    }
		 },
		data() {
			return {
				ScanAudioflag: true,
				Basicslist: [{
						name: "字体",
						title: "font",
						bgcolor: "#999999",
						icon: "xingzhuang-wenzi"
					},
					{
						name: "色彩",
						title: "color",
						bgcolor: "#333333",
						icon: "skinfill"
					},
					{
						name: "布局",
						title: "layout",
						bgcolor: "#999999",
						icon: "fuzhi"
					},
					{
						name: "盒子模型",
						title: "boxmodel",
						bgcolor: "#999999",
						icon: "huowudui"
					},
					{
						name: "图标",
						title: "icon",
						bgcolor: "#333333",
						icon: "discover"
					},
					{
						name: "定位",
						title: "position",
						bgcolor: "#333333",
						icon: "dingwei2"
					},
					{
						name: "动画",
						title: "transition",
						bgcolor: "#333333",
						icon: "shuaxin"
					},{
						name: "使用说明",
						title: "course",
						bgcolor: "#333333",
						icon: "settings_light"
					},{
						name: "关于",
						title: "about",
						bgcolor: "#333333",
						icon: "game"
					}
					
					
					


				],
				index: 0,
				title: 'Hello,世界',
				titlelist: [{
						title: "勇者你好，路易斯是类名驱动的样式库。准备好了，我们就马上开始吧！"
					},
					{
						title: "你还不知道怎么使用？让我来告诉你一下吧(*╹▽╹*)"
					},
					{
						title: "把以louis开头的类名加到你想用的元素就行了呀！"
					},
					{
						title: "例如:class='louis-font-B'，代表字体加粗嗷，更多功能快去探索吧！"
					}
				]
			};
		},
		onLoad() {},
		mounted() {
			this.loadFontFaceFromWeb();
		},
		onShow() {
			this.ScanAudioflag=uni.getStorageSync('ScanAudioflag')
		},
		methods: {
			getsetClipboardData() {
				uni.setClipboardData({
					data: 'https://gitee.com/xu_xi/Louis-UI',
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功，请在网页打开'
						});
					}
				});
			},
			changeScanAudioflag(){
				this.ScanAudioflag=!this.ScanAudioflag
				 uni.setStorageSync('ScanAudioflag', this.ScanAudioflag);
			},
			goBasics(url) {
				this.playScanAudio()
				setTimeout(() => {
					uni.navigateTo({
						url: '../Basics/' + url + '/' + url
					})
				}, 500);
			},
			playScanAudio() {
				this.ScanAudioflag ? this.ScanAudio() : null
			},
			ScanAudio() {

				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = 'https://656c-eleven-c69db3-1254279062.tcb.qcloud.la/12862.mp3?sign=b915dce1888239170165e8774ed7a939&t=1595260182';
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
			},
			next() {
				this.playScanAudio();
				this.index < 3 ? this.index++ : this.index = 0
			},
			loadFontFaceFromWeb() {
				uni.loadFontFace({
					family: 'font-test',
					source: `url("${url}")`
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.content {
		.next {
			.Fonttext {
				// -webkit-text-stroke: 1px #6893a0;
				position: absolute;
				z-index: 200;

				height: 100%;
				width: 100%;

				.ScanAudio {
					font-size: 45rpx;
					position: absolute;
					color: #cccccc;
					font-weight: bold;
					top: 265rpx;
					left: 350rpx;
					// animation: topmove 1.8s infinite;
					/*Safari 和 Chrome:*/
					// -webkit-animation: topmove 1.8s infinite;
				}

				.louisui {
					font-size: 45rpx;
					position: absolute;
					color: #cccccc;
					font-weight: bold;
					right: 40rpx;
					bottom: 50rpx;
					// animation: rotateY 2s infinite;
				}

				.HelloWord {
					width: 440rpx;
					font-size: 22rpx;
					line-height: 35rpx;
					position: absolute;
					color: #cccccc;
					font-weight: bold;
					left: 65rpx;
					bottom: 40rpx;
				}

				.triangle {
					width: 20rpx;
					font-size: 20rpx;
					line-height: 40rpx;
					position: absolute;
					color: #cccccc;
					font-weight: bold;
					right: 260rpx;
					bottom: 20rpx;

					animation: mymove 0.8s infinite;
					/*Safari 和 Chrome:*/
					-webkit-animation: mymove 0.8s infinite;
				}
			}
		}

		.Basics {
			margin-left: 1.5%;
			margin-right: 1.5%;
			padding-top: 10rpx;

			.Basicsitem {
				// opacity: 1;
				margin-bottom: 10rpx;
				width: 47%;
				display: inline-block;
				margin-left: 1.5%;
				margin-right: 1.5%;
				border-radius: 10rpx;
				padding: 20rpx;
				border: 2px solid #C0C0C0;
				box-sizing: border-box;
				background-color: rgba(29, 5, 41, 0.65);
				padding-top: 15rpx;
				padding-bottom: 20rpx;

				&:active {
					background-color: rgba(206, 31, 84, 0.6);
				}
			}

			// .Basicsitem
		}

		@keyframes rotateY {
			0% {
				bottom: 20rpx;
			}

			25% {
				bottom: 25rpx;
			}

			50% {
				bottom: 28rpx;
				color: #e81d54;
			}

			75% {
				bottom: 25rpx;
			}

			100% {
				bottom: 20rpx;
			}
		}

		@keyframes mymove {
			0% {
				bottom: 20rpx;
			}

			25% {
				bottom: 25rpx;
			}

			50% {
				bottom: 28rpx;
			}

			75% {
				bottom: 25rpx;
			}

			100% {
				bottom: 20rpx;
			}
		}

		@keyframes topmove {
			0% {
				transform: scale(1);
				top: 55rpx
			}

			// 25% {
			// 	transform:scale(1.1);
			// 	top:52rpx
			// }

			50% {
				transform: scale(1.1);
				top: 50rpx
			}

			// 	75% {
			// 		transform:scale(1.1)
			// 		;
			// 		top:52rpx
			// 	}

			100% {
				transform: scale(1);
				top: 55rpx
			}
		}
	}

	page {
		// font-family: font-test, 'PingFang SC'
		font-family: 'PingFang SC';
	}

	// page {
	//  background-size: 100% 100%;
	//  background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593949883448&di=9a0cdec9a4ae23792c6477ecac785b35&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F107877ee07339f767b11365d94651f5ae1aa1b4246d42-ZM0kdv_fw658');
	// }
</style>
